<template>
	<view class="">
		<view class="" style="width: 700rpx;">
		  <xingqiu ref="tag" :speed="speed" :texts="texts"></xingqiu>
		</view>
		<scroll-view class="nav-bar" scroll-x>
		    <!-- 要想使用flex布局实现横向滚动，就要在scroll-view里加一层容器block包裹，并且使用子组件才会出现滚动效果 -->
		    <view class="nav-bar-wrap">
		     <block  v-for="(item, index) in moodList" :key="index">
		        <view class="nav-bar-item flex-row justify-center items-center " 
			  		:class="currentMoode == index ? 'text-wrapper' : 'text-wrapper_3' ">
		         	{{item.title}}
			  
		        </view>
		      </block>
			  <!-- <view class="flex-row justify-start items-center section_2">
			  	<view @click="checkMood(index)" class="flex-row justify-center items-center "
			  		:class="currentMoode == index ? 'text-wrapper' : 'text-wrapper_3' " v-for="(item,index) in moodList"
			  		:key="index">
			  		{{item.title}}
			  	</view>
			  </view> -->
		    </view>
			
		</scroll-view>
	</view>
	
	<!-- <view class="flex-col page">
	  <view class="flex-col justify-start items-start relative">
	    <image
	      class="image_2"
	      src="https://ide.code.fun/api/image?token=669dbc564bbbbe00116c1de1&name=f346985433ac5965af345cd34f7d5271.png"
	    />
	    <image
	      class="image pos"
	      src="https://ide.code.fun/api/image?token=669dbc564bbbbe00116c1de1&name=ddac654c124676f898945a7eddeb24ed.png"
	    />
	    <image
	      class="image_3 pos_3"
	      src="https://ide.code.fun/api/image?token=669dbc564bbbbe00116c1de1&name=72d386cf4a2b093d7802df5854d53667.png"
	    />
	    <view class="flex-col section pos_2">
	      <image
	        class="self-stretch image_4"
	        src="https://ide.code.fun/api/image?token=669dbc564bbbbe00116c1de1&name=58021cdcc81b46d40c31863a252f0a00.png"
	      />
	      <view class="flex-row justify-between self-stretch group">
	        <view class="flex-row items-baseline self-start group_2">
	          <text class="font text_2">助手</text>
	          <text class="text ml-18">数据</text>
	        </view>
	        <view class="flex-row items-center self-center section_2">
	          <image
	            class="image_5"
	            src="https://ide.code.fun/api/image?token=669dbc564bbbbe00116c1de1&name=cb0ba5a7fed21a1d4a4f2de9a1b602cb.png"
	          />
	          <image
	            class="image_6 ml-12"
	            src="https://ide.code.fun/api/image?token=669dbc564bbbbe00116c1de1&name=88a9f1eac5e47baa4d314e5ea3a3726f.png"
	          />
	        </view>
	      </view>
	      <image
	        class="self-start image_7"
	        src="https://ide.code.fun/api/image?token=669dbc564bbbbe00116c1de1&name=b29adc4e5005d83ff9d08b6f4341b51d.png"
	      />
	    </view>
	  </view>
	  <view class="flex-col relative group_3">
	    <view class="flex-col group_4">
	      <view class="flex-col section_3">
	        <text class="self-center font_2">逻辑性差</text>
	        <view class="flex-col self-stretch group_5">
	          <view class="flex-col self-stretch">
	            <view class="flex-row relative group_6">
	              <text class="font_2 pos_7">计划性</text>
	              <view class="flex-col group_7 pos_4">
	                <text class="self-start font_2">计划性</text>
	                <text class="self-end font_4 text_3 mt-21">记忆力差</text>
	              </view>
	              <text class="font_3 pos_6">焦虑</text>
	              <view class="flex-col group_8 pos_5">
	                <text class="self-center font_2">计划性</text>
	                <view class="flex-col self-stretch mt-16-5">
	                  <text class="self-start font_4 text_3">计划性</text>
	                  <text class="self-end font_3">焦虑</text>
	                </view>
	              </view>
	              <view class="flex-col group_9 pos_8">
	                <text class="self-end font_2">计划性</text>
	                <view class="flex-col items-start self-stretch">
	                  <text class="font_2">外向</text>
	                  <text class="font_4 text_3 text_4">谦虚</text>
	                </view>
	              </view>
	            </view>
	            <view class="flex-row items-baseline">
	              <text class="font_3 text_6">焦虑</text>
	              <text class="font_5 text_5 ml-25-5">叛逆期</text>
	            </view>
	            <view class="flex-col items-end relative group_10">
	              <text class="font_4 text_3 text_7">计划性</text>
	              <text class="font_4 text_8">计划性</text>
	              <view class="flex-row justify-between equal-division">
	                <view class="flex-row equal-division-item">
	                  <text class="self-start font_2 text_9">无聊</text>
	                  <view class="flex-row items-center shrink-0 self-center ml-27-5">
	                    <text class="font_3">焦虑</text>
	                    <text class="font_4 text_3 ml-2">计划性</text>
	                  </view>
	                </view>
	                <view class="flex-col equal-division-item_2">
	                  <text class="self-center font_3">焦虑</text>
	                  <text class="self-start font_4 text_3">课后辅导作业</text>
	                  <text class="self-end font_2">计划性</text>
	                </view>
	              </view>
	              <text class="font_5 text_10 pos_9">专注力</text>
	            </view>
	            <view class="flex-row justify-between group_11 view">
	              <view class="flex-row items-center self-center group_12">
	                <text class="font_3">焦虑</text>
	                <view class="flex-col self-stretch group_13 ml-39">
	                  <text class="self-start font_3 text_13">焦虑</text>
	                  <text class="self-end font_5 text_11">内向</text>
	                </view>
	              </view>
	              <view class="flex-col self-start group_14">
	                <view class="flex-row items-center self-stretch group_15">
	                  <text class="font_5 text_14">拖延症</text>
	                  <text class="font_4 text_3 ml-13-5">计划性</text>
	                </view>
	                <text class="self-end font_2 text_12">虚荣心</text>
	              </view>
	            </view>
	          </view>
	          <text class="self-end font_2 text_15 mt-4">亲子关系</text>
	        </view>
	        <view class="flex-row self-stretch group_16">
	          <view class="flex-col self-stretch group_17">
	            <text class="self-start font_2 text_19">计划性</text>
	            <text class="self-end font_4 text_3 text_16">计划性</text>
	          </view>
	          <text class="self-start font_4 text_3 text_17">计划性</text>
	          <text class="self-center font_4 text_18">计划性</text>
	        </view>
	        <view class="flex-row self-stretch relative group_18">
	          <text class="self-start font_2 text_23">开朗</text>
	          <view class="flex-col flex-1 self-center group_21">
	            <view class="flex-col items-end self-stretch">
	              <text class="font_4 text_3">计划性</text>
	              <text class="font_2 text_24 mt-26">计划性</text>
	            </view>
	            <text class="self-start font_2 mt-14-5">计划性</text>
	          </view>
	          <view class="flex-col group_19 pos_10">
	            <view class="flex-col self-stretch group_20">
	              <text class="self-start font_4 text_3 text_21">多动症</text>
	              <text class="self-end font_3 text_20">朋友圈</text>
	              <text class="self-start font_3 text_22">焦虑</text>
	            </view>
	            <text class="self-start font_3 text_25">活泼好动</text>
	            <view class="flex-row justify-center self-stretch group_11 view_2">
	              <view class="flex-col self-start group_23">
	                <text class="self-start font_4 text_3">计划性</text>
	                <text class="self-end font_2 mt-11-5">计划性</text>
	              </view>
	              <view class="flex-col self-center group_24 ml-19">
	                <view class="flex-col self-stretch group_25">
	                  <text class="self-start font_4 text_3 text_27">自傲</text>
	                  <text class="self-end font_2 text_26">计划性</text>
	                </view>
	                <text class="self-end font_4 text_3 mt-10">计划性</text>
	              </view>
	            </view>
	          </view>
	          <view class="flex-col group_22 pos_11">
	            <text class="self-start font_3">焦虑</text>
	            <text class="self-center font_2 mt-31">计划性</text>
	          </view>
	          <text class="font_4 text_3 pos_12">计划性</text>
	        </view>
	      </view>
	      <view class="flex-row justify-between items-center group_1">
	        <image
	          class="image_8"
	          src="https://ide.code.fun/api/image?token=669dbc564bbbbe00116c1de1&name=e149755475d9a8eb55da948dc794fa4c.png"
	        />
	        <image
	          class="image_9"
	          src="https://ide.code.fun/api/image?token=669dbc564bbbbe00116c1de1&name=9739f2e461186122a480bc69ffc9265a.png"
	        />
	      </view>
	      <view class="flex-row justify-between group_26">
	        <view class="flex-col justify-start items-center button"><text class="font_6">活泼好动</text></view>
	        <view class="flex-col justify-start items-center button_2"><text class="font_6">缺乏耐心</text></view>
	        <view class="flex-col justify-start items-center button_3"><text class="font_6">焦虑</text></view>
	        <view class="flex-col justify-start items-center button_4"><text class="font_6">开朗</text></view>
	      </view>
	      <view class="flex-row justify-between group_27">
	        <view class="flex-col justify-start items-center button_5"><text class="font_6">粗心</text></view>
	        <view class="flex-col justify-start items-center button_6"><text class="font_6">乐观主义</text></view>
	        <view class="flex-col justify-start items-center button_7"><text class="font_6">热爱生活</text></view>
	        <view class="flex-col justify-start items-center button_8"><text class="font_6">聪明</text></view>
	      </view>
	    </view>
	    <view class="flex-row relative section_4 mt-14-5">
	      <view class="flex-col group_28 pos_13">
	        <view class="flex-row justify-between items-center group_29">
	          <text class="font text_28">性格分析</text>
	          <view class="flex-row items-center group_30">
	            <text class="font_8 text_29">行为习惯</text>
	            <text class="font_7 ml-5-5">98%</text>
	          </view>
	        </view>
	        <view class="flex-row">
	          <view class="flex-col justify-start items-end self-start relative group_31">
	            <text class="font_8">语言沟通</text>
	            <text class="font_7 text_30 pos_15">69%</text>
	          </view>
	          <view class="flex-col justify-start items-center flex-1 image-wrapper ml-8">
	            <image
	              class="image_10"
	              src="https://ide.code.fun/api/image?token=669dbc564bbbbe00116c1de1&name=c6a5ca4b42b0cf2df712948608ba47d8.png"
	            />
	          </view>
	          <text class="self-start font_8 text_31 ml-8">健康意识</text>
	        </view>
	      </view>
	      <text class="font_7 pos_14">73%</text>
	      <view class="flex-row justify-between equal-division_2 group_32">
	        <view class="flex-col justify-start items-end equal-division-item_3 group_33">
	          <text class="font_8">生活环境</text>
	          <text class="font_7 pos_16">99%</text>
	        </view>
	        <view class="flex-row items-baseline">
	          <text class="font_8">运动发育</text>
	          <text class="font_7 ml-4">100%</text>
	        </view>
	      </view>
	    </view>
	  </view>
	</view> -->
</template>

<script>
	import xingqiu from '@/components/xingqiu/xingqiu.vue'
	export default {
		data() {
			return {
				moodList: [{
						title: '开心1'
					},
					{
						title: '考试焦虑2'
					},
					{
						title: '自闭倾向3'
					},
					{
						title: '亲子游戏4'
					},
					{
						title: '注意力不集中5'
					},
					{
						title: '暴躁6'
					},
					{
						title: '考试焦虑7'
					},
					{
						title: '自闭倾向8'
					},
					{
						title: '亲子游戏9'
					},
					{
						title: '注意力不集中10'
					},
					{
						title: '暴躁11'
					}
				],
				currentMoode: 0,
				texts: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
				speed: 1, //越大越快
			}
		},
		components: {
			xingqiu
		},
		onReady() {
			// const ctx = uni.createCanvasContext('firstCanvas')
			
			// // Draw coordinates
			// ctx.arc(100, 75, 50, 0, 2 * Math.PI)
			// ctx.setFillStyle('#EEEEEE')
			// ctx.fill()
			
			// ctx.beginPath()
			// ctx.moveTo(40, 75)
			// ctx.lineTo(160, 75)
			// ctx.moveTo(100, 15)
			// ctx.lineTo(100, 135)
			// ctx.setStrokeStyle('#AAAAAA')
			// ctx.stroke()
			
			// ctx.setFontSize(12)
			// ctx.setFillStyle('black')
			// ctx.fillText('0', 165, 78)
			// ctx.fillText('0.5*PI', 83, 145)
			// ctx.fillText('1*PI', 15, 78)
			// ctx.fillText('1.5*PI', 83, 10)
			
			// // Draw points
			// ctx.beginPath()
			// ctx.arc(100, 75, 2, 0, 2 * Math.PI)
			// ctx.setFillStyle('lightgreen')
			// ctx.fill()
			
			// ctx.beginPath()
			// ctx.arc(100, 25, 2, 0, 2 * Math.PI)
			// ctx.setFillStyle('blue')
			// ctx.fill()
			
			// ctx.beginPath()
			// ctx.arc(150, 75, 2, 0, 2 * Math.PI)
			// ctx.setFillStyle('red')
			// ctx.fill()
			
			// // Draw arc
			// ctx.beginPath()
			// ctx.arc(100, 75, 50, 0, 1.5 * Math.PI)
			// ctx.setStrokeStyle('#333333')
			// ctx.stroke()
			
			// ctx.draw()
		},
		methods: {
			
		}
	}
</script>

<style>
	@import url('../../common/css/common.css');
	
	.mt-21 {
	  margin-top: 42rpx;
	}
	.mt-16-5 {
	  margin-top: 33rpx;
	}
	.ml-25-5 {
	  margin-left: 51rpx;
	}
	.ml-27-5 {
	  margin-left: 55rpx;
	}
	.ml-39 {
	  margin-left: 78rpx;
	}
	.ml-13-5 {
	  margin-left: 27rpx;
	}
	.mt-11-5 {
	  margin-top: 23rpx;
	}
	.ml-19 {
	  margin-left: 38rpx;
	}
	.mt-31 {
	  margin-top: 62rpx;
	}
	.mt-14-5 {
	  margin-top: 29rpx;
	}
	.ml-5-5 {
	  margin-left: 11rpx;
	}
	.page {
	  padding-bottom: 81rpx;
	  background-color: #f5f8ff;
	  height: 100%;
	  width: 100%;
	  overflow-y: auto;
	  overflow-x: hidden;
	}
	.image_2 {
	  margin-left: 30rpx;
	  width: 652rpx;
	  height: 586rpx;
	}
	.image {
	  width: 478rpx;
	  height: 507rpx;
	}
	.pos {
	  position: absolute;
	  left: 0;
	  top: 0;
	}
	.image_3 {
	  width: 446rpx;
	  height: 425rpx;
	}
	.pos_3 {
	  position: absolute;
	  right: 0;
	  top: 0;
	}
	.section {
	  padding: 33rpx 11rpx 219rpx 49rpx;
	  background-image: url('https://ide.code.fun/api/image?token=669dbc564bbbbe00116c1de1&name=e4dd5dfffc7d6d541f542c717c311404.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	}
	.pos_2 {
	  position: absolute;
	  left: 0;
	  right: 10rpx;
	  top: 0;
	}
	.image_4 {
	  margin-left: 11rpx;
	  margin-right: 14rpx;
	  width: 655rpx;
	  height: 24rpx;
	}
	.group {
	  margin-top: 37rpx;
	}
	.group_2 {
	  margin-top: 23rpx;
	}
	.font {
	  font-size: 36rpx;
	  font-family: PingFang SC;
	  line-height: 34rpx;
	}
	.text_2 {
	  color: #616274;
	  font-weight: 500;
	  opacity: 0.7;
	}
	.text {
	  color: #222222;
	  font-size: 52rpx;
	  font-family: PingFang SC;
	  font-weight: 500;
	  line-height: 49rpx;
	}
	/* .section_2 {
	  padding: 13rpx 27rpx 14rpx;
	  background-color: #ffffffe6;
	  border-radius: 32rpx;
	  height: 65rpx;
	} */
	.section_2 {
		margin-top: 47rpx;
		width: 600rpx;
		height: 200rpx;
		/* flex-wrap: wrap; */
		white-space: nowrap;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 设置几行 */
		overflow-x: scroll;
	}
	.text-wrapper {
		background-color: #40cee3;
		color: #fff;
		padding: 22rpx 32rpx 23rpx 30rpx;
		border-radius: 34rpx;
		height: 68rpx;
		margin-right: 14rpx;
		margin-bottom: 31rpx;
		font-weight: 500;
		font-size: 24rpx;
	}
	.text-wrapper_3 {
		/* padding: 22rpx 0; */
		padding: 22rpx 36rpx 23rpx 36rpx;
		background-color: #f9f9f9;
		border-radius: 34rpx;
		height: 68rpx;
		margin-right: 14rpx;
		margin-bottom: 31rpx;
		font-weight: 600;
		font-size: 24rpx;
		color: #171832;
	}
	.image_5 {
	  width: 62rpx;
	  height: 38rpx;
	}
	.image_6 {
	  width: 35rpx;
	  height: 35rpx;
	}
	.image_7 {
	  margin-left: 133rpx;
	  margin-top: 10rpx;
	  width: 50rpx;
	  height: 15rpx;
	}
	.group_3 {
	  margin-top: -344rpx;
	  padding-left: 37rpx;
	  padding-right: 35rpx;
	}
	.group_4 {
	  padding-left: 4rpx;
	}
	.section_3 {
	  margin-left: 3rpx;
	  background-image: linear-gradient(-2deg, #945fff 0%, #945fff 0%, #0c23ff 100%, #0c23ff 100%);
	}
	.font_2 {
	  font-size: 18rpx;
	  font-family: PingFang SC;
	  line-height: 18rpx;
	  font-weight: 500;
	  color: #0012ff;
	}
	.group_5 {
	  margin-right: 7rpx;
	  margin-top: 12rpx;
	  padding-left: 2rpx;
	}
	.group_6 {
	  padding-left: 51rpx;
	  padding-right: 48rpx;
	  height: 132rpx;
	}
	.pos_7 {
	  position: absolute;
	  left: 107rpx;
	  top: 29rpx;
	}
	.group_7 {
	  width: 83rpx;
	}
	.pos_4 {
	  position: absolute;
	  left: 180rpx;
	  top: 0;
	}
	.font_4 {
	  font-size: 14rpx;
	  font-family: PingFang SC;
	  line-height: 14rpx;
	  font-weight: 500;
	  color: #0012ff;
	}
	.text_3 {
	  opacity: 0.6;
	}
	.font_3 {
	  font-size: 22rpx;
	  font-family: PingFang SC;
	  line-height: 22rpx;
	  font-weight: 500;
	  color: #0012ff;
	}
	.pos_6 {
	  position: absolute;
	  right: 267rpx;
	  top: 23rpx;
	}
	.group_8 {
	  width: 108rpx;
	}
	.pos_5 {
	  position: absolute;
	  right: 127rpx;
	  top: 0;
	}
	.group_9 {
	  width: 563rpx;
	}
	.pos_8 {
	  position: absolute;
	  left: 50%;
	  top: 90rpx;
	  transform: translateX(-50%);
	}
	.text_4 {
	  margin-left: 35rpx;
	  margin-top: -8rpx;
	}
	.text_6 {
	  margin-left: 209rpx;
	}
	.font_5 {
	  font-size: 26rpx;
	  font-family: PingFang SC;
	  line-height: 27rpx;
	  font-weight: 500;
	  color: #0012ff;
	}
	.text_5 {
	  color: #9e6d14;
	  line-height: 26rpx;
	}
	.group_10 {
	  padding: 5rpx 2rpx 81rpx;
	}
	.text_7 {
	  margin-right: 75rpx;
	}
	.text_8 {
	  margin-top: -8rpx;
	}
	.equal-division {
	  position: absolute;
	  left: 0;
	  right: 25rpx;
	  top: 50%;
	  transform: translateY(-50%);
	}
	.equal-division-item {
	  padding: 36rpx 0 38rpx;
	}
	.text_9 {
	  margin-top: 10rpx;
	}
	.equal-division-item_2 {
	  padding: 24rpx 0;
	  width: 252rpx;
	}
	.text_10 {
	  line-height: 26rpx;
	}
	.pos_9 {
	  position: absolute;
	  right: 273rpx;
	  bottom: 0;
	}
	.group_11 {
	  padding-left: 14rpx;
	}
	.view {
	  margin-top: 11rpx;
	}
	.group_12 {
	  width: 258rpx;
	}
	.group_13 {
	  width: 135rpx;
	  height: 39rpx;
	}
	.text_13 {
	  margin-top: 17rpx;
	}
	.text_11 {
	  margin-top: -39rpx;
	  line-height: 26rpx;
	}
	.group_14 {
	  margin-top: 10rpx;
	  width: 257rpx;
	  height: 37rpx;
	}
	.group_15 {
	  margin-top: 11rpx;
	}
	.text_14 {
	  line-height: 26rpx;
	}
	.text_12 {
	  margin-top: -37rpx;
	}
	.text_15 {
	  margin-right: 49rpx;
	}
	.group_16 {
	  margin-right: 7rpx;
	  margin-top: 17rpx;
	}
	.group_17 {
	  width: 149rpx;
	  height: 26rpx;
	}
	.text_19 {
	  margin-top: 8rpx;
	}
	.text_16 {
	  margin-top: -26rpx;
	}
	.text_17 {
	  margin-left: 214rpx;
	}
	.text_18 {
	  margin-left: 199rpx;
	}
	.group_18 {
	  margin-right: 23rpx;
	  margin-top: 15rpx;
	  padding: 8rpx 56rpx 62rpx;
	}
	.text_23 {
	  margin-top: 39rpx;
	}
	.group_21 {
	  margin-left: 13rpx;
	}
	.text_24 {
	  margin-right: 7rpx;
	}
	.group_19 {
	  width: 252rpx;
	}
	.pos_10 {
	  position: absolute;
	  left: 167rpx;
	  top: 0;
	}
	.group_20 {
	  height: 50rpx;
	}
	.text_21 {
	  margin-left: 62rpx;
	  margin-top: 16rpx;
	}
	.text_20 {
	  margin-right: 43rpx;
	  margin-top: -30rpx;
	}
	.text_22 {
	  margin-top: 6rpx;
	}
	.text_25 {
	  margin-left: 50rpx;
	  margin-top: 49rpx;
	}
	.view_2 {
	  margin-top: 13rpx;
	}
	.group_23 {
	  width: 114rpx;
	}
	.group_24 {
	  width: 86rpx;
	}
	.group_25 {
	  height: 26rpx;
	}
	.text_27 {
	  margin-top: 12rpx;
	}
	.text_26 {
	  margin-top: -26rpx;
	}
	.group_22 {
	  width: 73rpx;
	}
	.pos_11 {
	  position: absolute;
	  right: 110rpx;
	  top: 36rpx;
	}
	.pos_12 {
	  position: absolute;
	  right: 176rpx;
	  top: 71rpx;
	}
	.group_1 {
	  margin-right: 4rpx;
	}
	.image_8 {
	  margin-left: 260rpx;
	  width: 18rpx;
	  height: 18rpx;
	}
	.image_9 {
	  margin-right: 258rpx;
	  width: 20rpx;
	  height: 20rpx;
	}
	.group_26 {
	  margin-right: 4rpx;
	  margin-top: 54rpx;
	}
	.button {
	  padding: 16rpx 0 18rpx;
	  border-radius: 30rpx;
	  background-image: url('https://ide.code.fun/api/image?token=669dbc564bbbbe00116c1de1&name=76483ac41f0dbe5a750188301503f25f.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	  width: 181rpx;
	  height: 61rpx;
	}
	.font_6 {
	  font-size: 28rpx;
	  font-family: PingFang SC;
	  line-height: 27rpx;
	  color: #ffffff;
	}
	.button_2 {
	  padding: 16rpx 0 18rpx;
	  border-radius: 30rpx;
	  background-image: url('https://ide.code.fun/api/image?token=669dbc564bbbbe00116c1de1&name=6cec9d68ec7ec1979c290e9e3332b922.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	  width: 181rpx;
	  height: 61rpx;
	}
	.button_3 {
	  padding: 16rpx 0 18rpx;
	  border-radius: 30rpx;
	  background-image: url('https://ide.code.fun/api/image?token=669dbc564bbbbe00116c1de1&name=0739c941430b6997f9cd5fb0eba3a83e.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	  width: 121rpx;
	  height: 61rpx;
	}
	.button_4 {
	  padding: 16rpx 0 18rpx;
	  border-radius: 30rpx;
	  background-image: url('https://ide.code.fun/api/image?token=669dbc564bbbbe00116c1de1&name=d7383498e64d3d7cbe7b86253e5f4b27.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	  width: 121rpx;
	  height: 61rpx;
	}
	.group_27 {
	  margin-right: 4rpx;
	  margin-top: 26rpx;
	}
	.button_5 {
	  padding: 16rpx 0 18rpx;
	  border-radius: 30rpx;
	  background-image: url('https://ide.code.fun/api/image?token=669dbc564bbbbe00116c1de1&name=2a1327847c222df152d0db52fb89f468.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	  width: 121rpx;
	  height: 61rpx;
	}
	.button_6 {
	  padding: 16rpx 0 18rpx;
	  border-radius: 30rpx;
	  background-image: url('https://ide.code.fun/api/image?token=669dbc564bbbbe00116c1de1&name=d5baf40d936c271797ac267249a694f8.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	  width: 182rpx;
	  height: 61rpx;
	}
	.button_7 {
	  padding: 17rpx 0;
	  border-radius: 30rpx;
	  background-image: url('https://ide.code.fun/api/image?token=669dbc564bbbbe00116c1de1&name=1d84b43a3a100a35aa11bf0cdfb00ccb.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	  width: 182rpx;
	  height: 61rpx;
	}
	.button_8 {
	  padding: 17rpx 0;
	  border-radius: 30rpx;
	  background-image: url('https://ide.code.fun/api/image?token=669dbc564bbbbe00116c1de1&name=ebea7d17bae342b42d1acc13378f6799.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	  width: 121rpx;
	  height: 61rpx;
	}
	.section_4 {
	  padding: 36rpx 0 40rpx 30rpx;
	  background-color: #ffffff;
	  box-shadow: 0rpx 0rpx 34.96rpx 11.04rpx #b8cbf840;
	  border-radius: 24rpx;
	  height: 416rpx;
	  border: solid 1rpx #ffffff;
	}
	.group_28 {
	  width: 561rpx;
	}
	.pos_13 {
	  position: absolute;
	  left: 30rpx;
	  top: 36rpx;
	}
	.group_29 {
	  padding: 0 8rpx;
	}
	.text_28 {
	  color: #1c335c;
	}
	.group_30 {
	  margin-right: 110rpx;
	}
	.font_8 {
	  font-size: 22rpx;
	  font-family: PingFang SC;
	  line-height: 22rpx;
	  color: #616274;
	}
	.text_29 {
	  line-height: 21rpx;
	}
	.font_7 {
	  font-size: 40rpx;
	  font-family: DIN Alternate;
	  line-height: 30rpx;
	  font-weight: 700;
	  color: #4237cb;
	}
	.group_31 {
	  margin-top: 87rpx;
	  padding-top: 7rpx;
	  width: 152rpx;
	}
	.text_30 {
	  color: #ed472c;
	}
	.pos_15 {
	  position: absolute;
	  left: 0;
	  bottom: 0;
	}
	.image-wrapper {
	  padding: 39rpx 0 27rpx;
	  background-image: url('https://ide.code.fun/api/image?token=669dbc564bbbbe00116c1de1&name=c147a390a658e9bc19a1c62cceef3905.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	  height: 263rpx;
	}
	.image_10 {
	  width: 168rpx;
	  height: 197rpx;
	}
	.text_31 {
	  margin-top: 86rpx;
	}
	.pos_14 {
	  position: absolute;
	  right: 0;
	  top: 153rpx;
	}
	.equal-division_2 {
	  position: absolute;
	  right: 69rpx;
	  top: 344rpx;
	}
	.group_32 {
	  width: 488rpx;
	}
	.equal-division-item_3 {
	  position: relative;
	}
	.group_33 {
	  padding: 4rpx 0;
	  width: 153rpx;
	}
	.pos_16 {
	  position: absolute;
	  left: 0;
	  bottom: 0;
	}
	scroll-view {
 white-space: nowrap;
}
/* 去除滚动条 */
::-webkit-scrollbar {
  display:none;
  width:0;
  height:0;
  color:transparent;
}
.nav-bar-wrap {      /* //  关键的样式 */
  display: flex;
  flex-flow: column wrap;
  height: 280rpx;
}
.nav-bar-item {
  /* width: 400rpx; */
  display: flex;
  height: 80rpx;
  margin-top: 18rpx ;
  position: relative;
}

scroll-view {
 white-space: nowrap;
}
/* 去除滚动条 */
::-webkit-scrollbar {
  display:none;
  width:0;
  height:0;
  color:transparent;
}
/* .nav-bar-wrap {      //  关键的样式
  display: flex;
  flex-flow: column wrap;
  height: 400rpx;
}
.nav-bar-item {
  width: 400rpx;
  display: flex;
  height: 170rpx;
  margin-top: 18rpx ;
  position: relative;
} */


.container {
  width: 250px; /* 定义容器宽度 */
  height: 40px; /* 定义容器高度 */
  overflow: auto; /* 开启滚动条 */
  white-space: nowrap; /* 禁止换行 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  line-height: 20px; /* 行高为20px，两行高度为40px，与容器高度匹配 */
  box-sizing: border-box; /* 防止padding影响实际宽度 */
}
</style>
